import { h, getCurrentInstance } from 'vue'
import _ from 'lodash'

function getName(text) {
  // 蛇形转驼峰
  return text.replace(/(?:^|-)([a-z])/g, (_, char) => char.toUpperCase())
}

export default function (props, ctx) {
  let instance = getCurrentInstance()
  /**
   * 对象转换
   */
  function handler(data) {
    // 字符串转文字
    if (_.isString(data)) {
      return data
    }
    if (!data.type) {
      return data
    }

    const componentName = getName(data.type)
    const component = instance.appContext.components[componentName]
    if (component) {
      return h(
        component,
        {
          ...data.attrs
        },
        traverseHander(data.children)
      )
    }
  }

  function traverseHander(arr) {
    if (!arr) return
    if (_.isArray(arr)) {
      return _.map(arr, item => handler(item))
    }
    // 插槽实现
    return _.mapValues(arr, item => {
      if (_.isArray(item)) {
        return traverseHander(item)
      }
      return handler(item)
    })
  }
  return handler(props.json)
}
